<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文件列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/frame/font.css">
		<link rel="stylesheet" href="./css/frame/xadmin.css">
		<link rel="stylesheet" href="./css/page/table.css" />
		<script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="./js/utils/TimeUtils.js"></script>
		<script type="text/javascript" src="./js/constant/urls.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js"></script>
		<script type="text/javascript" src="./js/frame/xadmin.js"></script>
	</head>

	<body class="layui-anim layui-anim-up">
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a href="">文件管理</a>
				<a><cite>文件列表</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="x-body">
			<div class="demoTable condition">
				&nbsp;&nbsp;&nbsp;&nbsp;文件名
				<div class="layui-inline" style="margin-right: 50px;">
					<input class="layui-input head-search" name="fileName" id="fileName" placeholder="文件名" autocomplete="off">
				</div>
				上传时间
				<div class="layui-inline">
					<input type="text" name="startTime" id="startTime" placeholder="开始时间" autocomplete="off" class="layui-input  head-search">
				</div> —
				<div class="layui-inline">
					<input type="text" name="endTime" id="endTime" placeholder="结束时间" autocomplete="off" class="layui-input  head-search">
				</div>
				<button class="layui-btn" data-type="reload">搜索</button>
			</div>
			<table class="layui-hide" id="file_table" lay-filter="tableFilter"></table>
		</div>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn" lay-event="deleteCheckData">删除选中行</button>
				<button class="layui-btn" onclick="x_admin_show('添加文件','./file-add.html', 1000, 550)"><i class="layui-icon"></i>添加</button>
			</div>
		</script>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">详情</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="pay">缴费</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<div id="outerdiv" class="wrap">
			<div id="innerdiv" style="position:absolute;">
				<img id="bigimg" style="border:5px solid #fff;" src="" />
			</div>
		</div>
		<script type="text/html" id="thumbImagePathBar">
			<a lay-event="thumbImagePath"><img width='100' height='32' src="{{d.thumbImagePath}}" /></a>
		</script>
		<script>
			$(function() {
				layui.use(['table', 'laydate'], function() {
					var table = layui.table,
						laydate = layui.laydate;
					//日期
					laydate.render({
						elem: '#startTime'
					});
					laydate.render({
						elem: '#endTime'
					});
					//方法级渲染
					table.render({
						elem: '#file_table',
						url: urls.fdfsUrl + '/api/file/base/list',
						toolbar: '#toolbarDemo',
						request: {
							pageName: 'pageNo',
							limitName: 'pageSize'
						},
						response: {
							statusName: 'success',
							statusCode: true,
							msgName: 'description',
							countName: 'extra',
							dataName: 'data'
						},
						parseData: function(res) {
							return {
								"success": res.success,
								"description": res.description,
								"extra": res.extra,
								"data": res.data
							};
						},
						cols: [
							[{
								checkbox: true,
								fixed: 'left'
							}, {
								field: 'id',
								title: 'ID',
								hide: true
							}, {
								field: 'fileName',
								title: '文件名',
								width: 300,
								templet: function(d) {
									let path = '';
									if (d.suffix.toLowerCase() == 'mp4') {
										path = d.path;
									} else {
										path = urls.fdfsUrl + d.path;
									}
									return d.fileName == null ? '—' : "<a href='" + path + "'  target='_blank'>" + d.fileName + "";
								},
								align: 'center'
							}, {
								field: 'suffix',
								title: '文件类型',
								width: 110,
								templet: function(d) {
									return d.suffix == null ? '—' : d.suffix;
								},
								align: 'center'
							}, {
								field: 'thumbImagePath',
								title: '缩略图',
								width: 150,
								align: 'center',
								toolbar: '#thumbImagePathBar'
							}, {
								field: 'createdTime',
								title: '上传时间',
								templet: function(d) {
									return d.createdTime == null ? '—' : timestampToDateTime(d.createdTime);
								},
								width: 200,
								align: 'center'
							}, {
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								width: 240,
								align: 'center'
							}]
						],
						id: 'testReload',
						page: true
					});
					selectesReload();
					//头工具栏事件
					table.on('toolbar(tableFilter)', function(obj) {
						var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
						switch (obj.event) {
							case 'deleteCheckData':
								var data = checkStatus.data; //获取选中行数据
								let arr = new Array();
								for (let i = 0; i < data.length; i++) {
									arr.push(data[i].id);
								}
								arr.join(",");
								layer.confirm('确定删除这些数据么', function() {
									$.ajax({
										type: "delete",
										url: urls.sysUrl + 'file/multi',
										async: true,
										data: JSON.stringify(arr),
										contentType: "application/json; charset=utf-8",
										success: function(res) {
											if (res.code === 0) {
												layer.msg(res.msg, {
													icon: 6,
													time: 1000
												}, function() {
													// 获得frame索引
													var index = parent.layer.getFrameIndex(window.name);
													//关闭当前frame
													parent.layer.close(index);
												});
											} else {
												layer.msg(res.msg);
											}
										}
									});
									pageReload(); //重载页面
								});
								break;
						};
					});
					//表数据监听工具条
					table.on('tool(tableFilter)', function(obj) {
						var data = obj.data;
						if (obj.event === 'thumbImagePath') {
							console.log(data.thumbImagePath);
							imgShow("#outerdiv", "#innerdiv", "#bigimg", data.thumbImagePath);
						} else if (obj.event === 'detail') {
							layer.open({
								type: 2,
								title: '文件信息详情',
								content: 'file-details.html?id=' + data.id,
								area: ['1000px', '600px']
							});
						} else if (obj.event === 'pay') {
							layer.open({
								type: 2,
								title: '文件缴费',
								content: 'file-pay.html?id=' + data.id,
								area: ['900px', '500px']
							});
						} else if (obj.event === 'edit') {
							layer.open({
								type: 2,
								title: '文件信息编辑',
								content: 'file-edit.html?id=' + data.id,
								area: ['1000px', '600px']
							});
						} else if (obj.event === 'del') {
							layer.confirm('确定删除行么', function(index) {
								obj.del();
								$.ajax({
									type: "delete",
									url: urls.fdfsUrl + '/api/file/delete/' + data.id,
									async: true,
									success: function(res) {
										if (res.success) {
											layer.msg(res.description, {
												icon: 6,
												time: 1000
											}, function() {
												//关闭当前frame
												layer.close(index);
											});
										} else {
											layer.msg(res.description, {
												icon: 5,
												time: 1000
											});
										}
									}
								});
								layer.close(index);
							});
						}
					});
					var active = {
						reload: function() {
							//执行重载
							table.reload('testReload', {
								page: {
									curr: 1 //重新从第 1 页开始
								},
								where: {
									fileName: $('#fileName').val(),
									regionId: $('#regionId').val(),
									buildId: $('#buildId').val(),
									floorId: $('#floorId').val(),
									houseId: $('#houseId').val(),
									startTime: dateToTimestamp($('#startTime').val()),
									endTime: dateToTimestamp($('#endTime').val())
								}
							}, 'data');
						}
					};
					//搜索单击事件
					$('.demoTable .layui-btn').on('click', function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});
					$('.demoTable .layui-btn').on('click', function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});
					//执行表格重载
					function pageReload() {
						table.reload('testReload', {
							page: {
								curr: 1 //重新从第 1 页开始
							}
						});
					}
				});
				// 下拉菜单重载
				function selectesReload() {
					$.ajax({
						type: "get",
						url: urls.sysUrl + 'region/list?pageNo=1&pageSize=999',
						async: false,
						success: function(res) {
							if (res.errorCode === 0) {
								if (res.success) {
									$('#regionId').html("<option value=''>请选择小区</option>");
									for (let rg of res.data) {
										$('#regionId').append("<option value='" + rg.id + "'>" + rg.name + "</option>");
									}
								}
							}
						}
					});
					$.ajax({
						type: "get",
						url: urls.sysUrl + 'build/list?pageNo=1&pageSize=999',
						async: false,
						success: function(res) {
							if (res.errorCode === 0) {
								if (res.success) {
									$('#buildId').html("<option value=''>请选择幢号</option>");
									for (let rg of res.data) {
										$('#buildId').append("<option value='" + rg.id + "'>" + rg.number + "幢</option>");
									}
								}
							}
						}
					});
					$.ajax({
						type: "get",
						url: urls.sysUrl + 'floor/list?pageNo=1&pageSize=999',
						async: false,
						success: function(res) {
							if (res.errorCode === 0) {
								if (res.success) {
									$('#floorId').html("<option value=''>请选择楼层</option>");
									for (let rg of res.data) {
										$('#floorId').append("<option value='" + rg.id + "'>" + rg.number + "楼</option>");
									}
								}
							}
						}
					});
					$.ajax({
						type: "get",
						url: urls.sysUrl + 'house/list?pageNo=1&pageSize=999',
						async: false,
						success: function(res) {
							if (res.errorCode === 0) {
								if (res.success) {
									$('#houseId').html("<option value=''>请选择门牌号</option>");
									for (let rg of res.data) {
										$('#houseId').append("<option value='" + rg.id + "'>" + rg.number + "</option>");
									}
								}
							}
						}
					});
				}
				// 图片放大展示
				function imgShow(outerdiv, innerdiv, bigimg, src) {
					$(bigimg).attr("src", src); //设置#bigimg元素的src属性
					/*获取当前点击图片的真实大小，并显示弹出层及大图*/
					// $(bigimg).attr("src", src).load(function() {
					var windowW = $(window).width(); //获取当前窗口宽度
					var windowH = $(window).height(); //获取当前窗口高度
					var realWidth, realHeight;
					getImageWidth(src, function(w, h) {
						realWidth = w;
						realHeight = h;
					});
					var imgWidth, imgWidth;
					var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
					if (realHeight > windowH * scale) { //判断图片高度
						imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放
						imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度
						if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度
							imgWidth = windowW * scale; //再对宽度进行缩放
						}
					} else if (realWidth > windowW * scale) { //如图片高度合适，判断图片宽度
						imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放
						imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
					} else { //如果图片真实高度和宽度都符合要求，高宽不变
						imgWidth = realWidth;
						imgHeight = realHeight;
					}
					console.log(imgWidth + " -- " + imgWidth);
					$(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放
					var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距
					var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距
					$(innerdiv).css({
						"top": h,
						"left": w
					}); //设置#innerdiv的top和left属性
					$(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.goal_img
					// });
					$(outerdiv).click(function() { //再次点击淡出消失弹出层
						$(this).fadeOut("fast");
					});
				}
				// 获取图片真实高度
				function getImageWidth(src, callback) {
					var img = new Image();
					img.src = src;
					// 如果图片被缓存，则直接返回缓存数据
					if (img.complete) {
						callback(img.width, img.height);
					} else {
						img.onload = function() {
							callback(img.width, img.height);
						}
					}
				}
			});
		</script>
	</body>

</html>
